<template>
  <!-- 中国地图 -->
  <div class="chart-container" :style="position">
      <div class="chart-main" :id="id">

      </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {onMounted, reactive, ref,watch} from 'vue'
import '../../utils/china'
export default {
  name:'ChinaMapChart',
  props:{
    data:{
      type:String,
      default:'hhh'
    },
    info: {
      type: Object,
      default: () => ({})
    },
    boxPosition:{       
      type:Object,       
      default:()=>{}     
    }
  },
  setup(props){
    const position = `left:${props.boxPosition?.left}px;top:${props.boxPosition?.top}px;`
    const id = 'chinaMap-main'+Number(Math.random()*100).toFixed(4)
    var option;
    var myChart;
    let data = ref([
      {name: '北京',value: 18,color:'#f40' },{name: '天津',value: 18 },
      {name: '上海',value: 18 },{name: '重庆',value: 18 },
      {name: '河北',value: 18 },{name: '河南',value: 18 },
      {name: '云南',value: 18 },{name: '辽宁',value: 18 },
      {name: '黑龙江',value: 18 },{name: '湖南',value: 18 },
      {name: '安徽',value: 18 },{name: '山东',value: 18 },
      {name: '新疆',value: 18 },{name: '江苏',value: 18 },
      {name: '浙江',value: 18 },{name: '江西',value: 18 },
      {name: '湖北',value: 18 },{name: '广西',value: 18 },
      {name: '甘肃',value: 18 },{name: '山西',value: 18 },
      {name: '内蒙古',value: 18 },{name: '陕西',value: 18 },
      {name: '吉林',value: 18 },{name: '福建',value: 18 },
      {name: '贵州',value: 18 },{name: '广东',value: 18 },
      {name: '青海',value: 18 },{name: '西藏',value: 18 },
      {name: '四川',value: 18 },{name: '宁夏',value: 18 },
      {name: '海南',value: 18 },{name: '台湾',value: 18 },
      {name: '香港',value: 18 },{name: '澳门',value: 18 }
    ])   //假数据
    onMounted(()=>{
      myChart = echarts.init(document.getElementById(id));
      option = reactive({
        backgroundColor: 'transparent',
        geo: {
            map: 'china',//这里的名称需要和china.js: echarts.registerMap('china',{})中的名称一致
            zoom: 1.23,       // 地图比例
            center: [105, 36], // 调整地图位置
            roam: false, //缩放
            label: {
                normal: {
                  show: true, //省份名展示
                  fontSize: "10",
                  color: "rgba(255,255,255,.5)"
                },
                // emphasis: { //鼠标移入时的样式
                //   show: false
                // }
            },
        },
        tooltip : {
          trigger: 'item'
        },
        visualMap:{
            min: 0,
            max: 5000,
            showLabel:true,
            textStyle:{
              color:'#6db4f3'
            },
            pieces: [
              {
                gte: 5000,
                label: "> 5000",
                color: "#2e40c8"
              },
              {
                gte: 2000,
                lt: 5000,
                label: "2000 - 5000",
                color: "#396cdf"
              },
              {
                gte: 1000,
                lt:2000,
                label: "1000 - 2000",
                color: "#4283e1"
              },
              {
                gte: 10,
                lt: 1000,
                label: "10 - 1000",
                color: "#69b2e7"
              },
              {
                gte:0,
                lt:10,
                label:'0 - 10',
                color: "#6bc3e7"
              }
            ],
            left:40
        },
        series: [//地图上二开点线特效数组，按需添加
            {
                name: '今日全国登录人数展示',
                type: 'map',
                geoIndex: 0,
                // roam: true,
                // map: 'China',
                // emphasis: {
                    // label: {
                        // show: true
                    // }
                // },
                data: [
                          {
                            name: "南海诸岛",
                            value: 100,
                            // eventTotal:100,
                            // specialImportant:10,
                            // import:10,
                            // compare:10,
                            // common:40,
                            // specail:20
                          },
                          {
                            name: "北京",
                            value: 800
                          },
                          {
                            name: "上海",
                            value: 400
                          },
                          {
                            name: "天津",
                            value: 130
                          },
                          {
                            name: "大同",
                            value: 13000
                          },
                          {
                            name: "重庆",
                            value: 750
                          },
                          {
                            name: "河北",
                            value: 130
                          },
                          {
                            name: "河南",
                            value: 830
                          },
                          {
                            name: "云南",
                            value: 110
                          },
                          {
                            name: "辽宁",
                            value: 3000
                          },
                          {
                            name: "黑龙江",
                            value: 1520
                          },
                          {
                            name: "湖南",
                            value: 6900
                          },
                          {
                            name: "安徽",
                            value: 1000
                          },
                          {
                            name: "山东",
                            value: 399
                          },
                          {
                            name: "新疆",
                            value: 0
                          },
                          {
                            name: "江苏",
                            value: 31
                          },
                          {
                            name: "浙江",
                            value: 104
                          },
                          {
                            name: "江西",
                            value: 36
                          },
                          {
                            name: "湖北",
                            value: 52
                          },
                          {
                            name: "广西",
                            value: 33
                          },
                          {
                            name: "甘肃",
                            value: 7
                          },
                          {
                            name: "山西",
                            value: 5
                          },
                          {
                            name: "内蒙古",
                            value: 778
                          },
                          {
                            name: "陕西",
                            value: 22
                          },
                          {
                            name: "吉林",
                            value: 4
                          },
                          {
                            name: "福建",
                            value: 18
                          },
                          {
                            name: "贵州",
                            value: 5
                          },
                          {
                            name: "广东",
                            value: 98
                          },
                          {
                            name: "青海",
                            value: 1
                          },
                          {
                            name: "西藏",
                            value: 0
                          },
                          {
                            name: "四川",
                            value: 44
                          },
                          {
                            name: "宁夏",
                            value: 4
                          },
                          {
                            name: "海南",
                            value: 22
                          },
                          {
                            name: "台湾",
                            value: 3
                          },
                          {
                            name: "香港",
                            value: 5
                          },
                          {
                            name: "澳门",
                            value: 555
                          }
                        ]
            }
        ],
      })
      create()
    })
    const create = ()=>{
      myChart.setOption(option)
    }
    watch(
        () => props.info?.size,
        () => {
            myChart.dispose() //重置echart
            myChart = null
            myChart = echarts.init(document.getElementById(id));
            myChart.setOption(option)
        },
        { deep: true,}
    );
    return{
      position,
      id
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-container{
  width: 100%;
  height: 100%;
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;//暂时，需改为动态数据
    // background-color: rgba($color: #071c55, $alpha: 0.5);
  }
  .chart-main{
    width: 100%;
    height: 100%;
  }
</style>